<template>
  <div>
<!--    <div class="storeClassification">-->
<!--      <div style="margin-top: 10px" class="storeClassification-title cneter">-->
<!--        <span class="storeClassification-text">{{shopCategoryName}}</span>-->
<!--      </div>-->
<!--      <div class="storeClassification-redSlideLine cneter">-->
<!--        <div class="redSlideLine">-->
<!--        </div>-->
<!--      </div>-->
<!--    </div>-->
    <div >
      <div class="saveCard-bottom pd-L20 pd-R20">
        <div class="container-wrap" >
          <div class="product-item" v-for="(item,index) in detailedList">
            <div class="product-item-left">
              <img class="product-item-left-image" :src="item.doorPhoto" />
            </div>
            <div class="product-item-middle">

              <div class="product_item_middle_name">
                <div class="product-item-middle-name-contain">
                  <div class="product_item_middle_name_contain_warp">
                    <div>
                      <span class="product-item-middle-title">{{item.name}}</span>
                    </div>
                    <div >
                      <span class="product-item-middle-notice">距离:{{item.distance  | distanceFormat }}km</span>
                    </div>
                  </div>
                </div>
                <div>
<!--                  <div class="iconfont icon-zhima-jianjudingwei" style="color:#1677FF"></div>-->
                  <i class="el-icon-location"></i>
                </div>
                <div>
                  <span class="product-item-middle-distance text-overflow-hidden">{{item.address}}</span>
                </div>
              </div>
            </div>
          </div>
        </div>
      </div>
    </div>

    <div  v-if="detailedList.length == 0">
      <noData></noData>
    </div>

  </div>
</template>
<script>

import noData from "@/views/designer/components/product/components/noData";
import { list } from "../../../../api/shop";
import { mapGetters } from "vuex";
export default {
  name: "nearbyShops",
  computed: {
    ...mapGetters(["mchId"]),
  },
  components:{
    noData
  },
  data() {
    return {
      lng:0,
      lat:0,
      showDetail: false,
      pageNum: 1,
      pageSize: 5,
      detailedList: [],
      shopCategoryName:'完美商家'
    };
  },
  created() {
    this.getNearbyShops();
  },
  methods: {
    getNearbyShops(){
      this.loadinging = true;
      if(this.pageNum==1){
        this.detailedList=[]
      }
      let param = {
        lat: 24.46,
        lng: 118.1,
        pageNum:this.pageNum,
        pageSize:this.pageSize,
        mchId:this.mchId
      }
      list(param).then(res=>{
        res.data.forEach(item => {
          this.detailedList.push(item)
        })
        if (this.detailedList.length > 0) {
          this.showDetail = true;
        }
      })
    },
  }
}
</script>

<style scoped>
.app {
  background-color: rgb(248, 248, 248);
}
.storeClassification{
  display: flex;
  flex-direction: column;
}

.redSlideLine{
  width:30px;
  height: 5px;
  background-color: red;
}
.storeClassification-text{
  font-size:16px;
}
.cneter{
  display: flex;
  flex-direction: row;
  justify-content: center;
}
.storeClassification-title{
  width:90px;
}
.storeClassification-redSlideLine{
  width: 90px;
  margin-top: 5px;
}
.container-wrap{
  margin-left: 15px;
  margin-right: 15px;
  margin-top: 15px;
}
.product_item_middle_name{
  flex: 1;
  display: flex;
  flex-direction: column;
  justify-content: space-between;
}
.product-item-middle{
  display: flex;
  flex-direction: row;
  justify-content: space-between;
  width: 225px;
  height: 80px;
}
.product-item-middle-title{
  font-weight: bold;
  font-size: 15px;
  color: #000000;
  text-overflow:ellipsis;
}
.product-item-middle-distance{
  font-size: 12px;
  color: #000000;
  text-overflow:ellipsis;
}
.product-item-middle-notice{
  font-size: 12px;
  color:#bdbdbd;
  color: #000000;
  text-overflow:ellipsis;
}
.product-item{
  margin-top: 10px;
  display: flex;
  flex-direction: row;
  align-items: center;
  padding-bottom: 5px;
  padding-top: 5px;
  background: #ffffff;
}
.product-item-left{
  padding-right: 15px;
}
.product-item-left-image{
  width: 90px;
  height: 90px;
  background-color:darkgray;
  border-radius: 16px;
}
.center{
  display: flex;
  align-items: center;
  justify-content: center;
}
.product-item-middle-give-wrap{
  display: flex;
  flex-direction: row;
  justify-items: flex-start;
}
.product-item-middle-give{
  display: flex;
  flex-direction: row;
  height: 19px;
  border-top-left-radius: 16px;
  border-bottom-right-radius: 16px;
  border-top-style: solid;
  border-top-width: 2px;
  border-top-color:#ff8400;
  border-left-style: solid;
  border-left-width: 2px;
  border-left-color:#ff8400;
  border-bottom-style: solid;
  border-bottom-width: 2px;
  border-bottom-color:#ff8400;
  border-right-style: solid;
  border-right-width: 2px;
  border-right-color:#ff8400;
}
.product-item-middle-present-text{
  font-size:26px;
  color: white;
}
.product-item-middle-certificate{
  margin-left: 5px;
  margin-right: 5px;
  display: flex;
  flex-direction: row;
  align-items: center;
  font-size:26px;
  color:#ff8400;
}
.product-item-middle-present{
  width:19px;
  height:19px;
  background-color:#ff8400;
}
.text-overflow-hidden{
  display: block;
  overflow: hidden;
  width: 105px;
  text-overflow: ellipsis;
  overflow: hidden;
  white-space: nowrap;
  animation-fill-mode: backwards;
}
.product_item_middle_name_contain_warp{
  display: flex;
  justify-content: space-between;
}
</style>
